<template>
  <div class="flow-chart">
    <div>
      <template v-if="flowSteps.length !== relatedStep.length">
        <i class="el-icon-warning"></i>
        <span> &nbsp;{{$t('configLazyLoad.businessConfig.thereAre')}}{{flowSteps.length - relatedStep.length}}{{$t('configLazyLoad.businessConfig.stepTips')}}</span>
      </template>
      <template v-if="actionNum > 40">

        <span class="prompt fr">{{$t('configLazyLoad.businessConfig.stepTips1')}}</span>
        <el-button type="text"
                    class="primary_btn fr"
                    style="margin-top: -6px"
                    @click.stop="textToSvg(text)"
                    icon="el-icon-refresh"
                    size="mini">{{$t('configLazyLoad.businessConfig.stepTips2')}}
        </el-button>
      </template>
    </div>
    <div class="flow_view__wrapper">
      <div ref="flowShow" id="flow-view" class="flow-view mermaid">
      </div>
    </div>
  </div>
</template>

<script>
  import mermaid from 'mermaid'
  // import 'mermaid/dist/mermaid.forest.css'
  export default {
    name: 'bus-chart',
    props: {
      flowSteps: {
        type: Array,
        default: function () {
          return []
        }
      },
      relatedStep: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    data () {
      return {
        text: '',
        actionNum: 0 // 动作个数
      }
    },
    watch: {
      flowSteps: {
        deep: true,
        handler: function (newV, oldV) {
          this.analyCode()
        }
      },
      text () {
        // 动作个数小于40个自动画图
        if (this.actionNum <= 40) {
          this.textToSvg()
        }
      }
    },
    methods: {
      // 生成一条流程
      basedraw (step1, step2, action) {
        // step1 -- action
        // action --> step2
        let text = `${step1._id}("${step1.name}") --- ${action._id}("${action.name}"); \n`
        text += `${action._id}("${action.name}") --> ${step2._id}("${step2.name}"); \n`
        text += `class ${step1._id} flow-view__common; \n`
        text += `class ${action._id} flow-view__action; \n`
        if (step2.type === 'sys') {
          text += `class ${step2._id} flow-view__${step2.systemFn}; \n`
        } else {
          text += `class ${step2._id} flow-view__common; \n`
        }
        return text
      },
      // 生成流程图text
      analyCode () {
        let text = 'graph LR; \n '
        let actionNum = 0
        this.flowSteps.forEach((item, index) => {
          if (this.relatedStep.indexOf(item._id) === -1) {
            return
          }
          let actions = item.actions || []
          actions.forEach((action) => {
            let step2Id = action.jumpTo || ''
            this.flowSteps.some((step2) => {
              if (step2._id === step2Id) {
                actionNum++
                text += this.basedraw(item, step2, action)
                return true
              }
            })
          })
        })
        this.actionNum = actionNum
        this.text = text
      },
      // 画流程图
      textToSvg (text = this.text) {
        let mermaidholder = document.getElementById('flow-view')
        if (!mermaidholder) {
          return
        }
        mermaidholder.innerHTML = text
        mermaidholder.removeAttribute('data-processed')
        // mermaidholder.appendChild(mermaidnode)
        mermaid.init('#flow-view')
        mermaidholder.firstChild.style.height = mermaidholder.firstChild.getAttribute('viewBox').split(' ')[3] + 'px'
        mermaidholder.firstChild.style.width = mermaidholder.firstChild.getAttribute('viewBox').split(' ')[2] + 'px'
        mermaidholder.style.overflow = 'auto'
      }
    },
    beforeMount () {
//      mermaid.mermaidAPI.initialize({
//        startOnLoad: true
//      })
      this.$nextTick(() => {
        this.analyCode()
      })
    }
  }
</script>
<style lang='stylus'>

  #flow-view.flow-view.mermaid
    margin auto
    .flow-view__complete
      rect
        fill #C5EFDC
        stroke #C5EFDC
      .label
        color #41B27F
    .flow-view__cancel
      rect
        fill #FFD6D6
        stroke #FFD6D6
      .label
        color #FF6B6B
    .flow-view__common
      rect
        fill:#C8E2FA;
        stroke:#C8E2FA;
      .label
        color #459AE9
    .flow-view__action
      rect
        fill:#fff;
        stroke:#fff;
      .label
        color #000
    .edgePath
      .path
        stroke #8BBBE8
        stroke-width 1.5px
    .edgePath
      marker
        fill #8BBBE8
    .edgeLabel
      background-color #fff
    .arrowheadPath
      fill #8BBBE8
</style>
<style scoped lang='stylus'>
  @import '../../../../../assets/common.styl'
  .flow_view__wrapper
    width 100%
    overflow-x auto
    text-align center
  .prompt
    color $cf-gray5
  .el-icon-warning
    color $cf-color0
</style>
